/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;

$marker-width: 1.4 * styles.$base-size;
$marker-margin-right: awsui.$space-xxs;

.marker {
  @include styles.styles-reset;
  margin-inline-end: $marker-margin-right;
  margin-block-start: awsui.$space-xxs;
  border-start-start-radius: 2px;
  border-start-end-radius: 2px;
  border-end-start-radius: 2px;
  border-end-end-radius: 2px;
  inline-size: $marker-width;
  flex-shrink: 0;
  cursor: inherit;

  &--line {
    // same margin as in filled marker + half the difference in their size
    margin-block-start: 0.9 * styles.$base-size;
    block-size: 0.4 * styles.$base-size;
  }

  &--rectangle {
    block-size: 1.4 * styles.$base-size;
    border-start-start-radius: 2px;
    border-start-end-radius: 2px;
    border-end-start-radius: 2px;
    border-end-end-radius: 2px;
  }

  &--hollow-rectangle {
    block-size: 1.4 * styles.$base-size;
    border-start-start-radius: 2px;
    border-start-end-radius: 2px;
    border-end-start-radius: 2px;
    border-end-end-radius: 2px;

    // inner rectangle
    &::after {
      content: '';
      display: block;
      margin-block: 0.2 * styles.$base-size;
      margin-inline: 0.2 * styles.$base-size;
      block-size: 1 * styles.$base-size;
      background-color: awsui.$color-background-container-content;
      opacity: 0.5;
    }
  }

  &--dashed {
    block-size: 0.4 * styles.$base-size;
    inline-size: 0.6 * styles.$base-size;
    // same margins as in filled marker + half the difference in their size
    margin-block-start: 0.9 * styles.$base-size;
    margin-inline-end: 1.2 * styles.$base-size;

    &::after {
      content: '';
      display: block;
      inline-size: 0.6 * styles.$base-size;
      block-size: 0.4 * styles.$base-size;
      margin-inline-start: 0.8 * styles.$base-size;
      border-start-start-radius: 2px;
      border-start-end-radius: 2px;
      border-end-start-radius: 2px;
      border-end-end-radius: 2px;
      background-color: inherit;
    }
  }
}
